<template>
  <view style="height: 100vh; background: #fff">
    <view class="img-a">
      <view class="t-b">恭喜完成本次练习~</view>
    </view>
    <view class="login-view" style>
      <view
        style="
          height: 150rpx;
          font-size: 60rpx;
          color: #3d6c8b;
          line-height: 150rpx;
          text-align: center;
        "
      >{{ item[0].xiaojieming1 }}</view>
      <!--pages/result/result.uniml -->

      <view class="result-card">
        <view class="title">评分</view>
        <view class="score-content">
          <view class="count-score">
            <span>{{ fengshu }}</span>
            <span class="chinese">分</span>
          </view>
          <view class="score-detail">
            <p style="margin-bottom: 30rpx">
              答对了:
              <span class="score" style="margin-left: 10rpx">{{ zuodui }}</span>道
            </p>
            <p style="margin-bottom: 30rpx">
              正确率:
              <span class="score" style="margin-left: 10rpx">{{ zhengquelv }}</span>%
            </p>
            <p style="margin-bottom: 30rpx">
              时长 :
              <span class="score" style="margin-left: 10rpx">{{ minutes }}:{{ seconds }}</span>
            </p>
          </view>
        </view>
        <view
          style="border-top: 20rpx solid #f2f2f2; display: flex; justify-content: space-between"
        >
          <view
            v-for="(item1, index) in item"
            :key="index"
            style="margin-top: 30rpx"
            @tap="chankanxianqing(item1)"
          >
            <view style="margin-bottom: 30rpx">第{{ index + 1 }} 题</view>
            <text
              :class="
                item1.my_right == true ? 'icon iconfont icon-zhengque' : 'icon iconfont icon-cuowu'
              "
              :style="
                item1.my_right == true
                  ? 'font-size: 40rpx;color:rgb(102, 235, 102)'
                  : 'font-size: 40rpx;color:red'
              "
            ></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import uniPopup from '../../components/components/uni-popup/uni-popup.vue'
// import uCollapse from '../../components/vk-uview-ui_1.5.2/components/u-collapse/u-collapse.vue'
// import uCollapseItem from '../../components/vk-uview-ui_1.5.2/components/u-collapse-item/u-collapse-item.vue'

import { getGradeContent, insertScore } from '../../services/kaosi'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
import { reactive, ref, toRefs } from 'vue'
const user = myStore()
console.log(user.userinfo, '用户是什么')

const item = ref<any>(0)
const fengshu = ref(0)
const zuodui = ref(0)
let zhengquelv = ref(0)
const minutes = ref(0)
const seconds = ref(0)
onLoad(async (e: any) => {
  // 监听全局关注和顶踩事件
  console.log(e)
  console.log(e.fengshu, '我看看111')
  console.log(e.timu)

  console.log(JSON.parse(decodeURIComponent(e.timu)), '我看看11155555')
  if (JSON.parse(decodeURIComponent(e.timu))) {
    //从答题过程中点击
    item.value = JSON.parse(decodeURIComponent(e.timu))
    minutes.value = e.minutes
    seconds.value = e.seconds
    zuodui.value = e.zuodui
    fengshu.value = e.fengshu
    zhengquelv.value = (zuodui.value / item.value.length) * 100
    if (e.chaxun == 'chaxun') {
      item.value.map((obj) => {
        obj.my_right = obj.my_right == 'false' ? false : true
      })
      console.log('查询')
    } else {
      let res = await insertScore({
        item: item.value,
        seconds: seconds.value,
        zuodui: zuodui.value,
        fengshu: fengshu.value,
        zhengquelv: zhengquelv.value,
        user: user.userinfo,
        minutes: minutes.value,
      })
      console.log(res, '插入了没有')
    }
  } else {
    //从历史资料中点击
  }
})

const chankanxianqing = (item1) => {
  console.log(item1)
  uni.navigateTo({
    url: '../../pagesB/timucuotixianqin/index?item1=' + encodeURIComponent(JSON.stringify(item1)),
  })
}
</script>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
//登录第三方图标
.txt {
  // 水平居中

  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}
.img-a {
  width: 100%;
  height: 450rpx;
  background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
  background-size: 100%;
}
.reg {
  font-size: 28rpx;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  font-weight: bold;
  background: #f5f6fa;
  color: #000000;
  text-align: center;
  margin-top: 30rpx;
}

.login-view {
  width: 100%;
  position: relative;
  margin-top: -120rpx;
  background-color: #ffffff;
  border-radius: 8% 8% 0% 0;
}

.t-login {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  padding-top: 80rpx;
}

.t-login button {
  font-size: 28rpx;
  background: #2796f2;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  font-weight: bold;
}

.t-login input {
  height: 90rpx;
  line-height: 90rpx;

  border-bottom: 1px solid #e9e9e9;
  font-size: 28rpx;
}

.t-login .t-a {
  position: relative;
}

.t-b {
  text-align: left;
  font-size: 42rpx;
  color: #ffffff;
  padding: 130rpx 0 0 70rpx;
  font-weight: bold;
  line-height: 70rpx;
}

.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #5677fc;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
}

.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}

.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0;
}

.t-login .t-g {
  float: left;
  width: 50%;
}

.t-login .t-e image {
  width: 50rpx;
  height: 50rpx;
}

.t-login .t-f {
  text-align: center;
  margin: 150rpx 0 0 0;
  color: #666;
}

.t-login .t-f text {
  margin-left: 20rpx;
  color: #aaaaaa;
  font-size: 27rpx;
}

.t-login .uni-input-placeholder {
  color: #aeaeae;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20';
}

.xieyi {
  margin-left: 70rpx;
  left: 20rpx;
  width: 500rpx;
  display: flex;
  position: absolute;
  justify-content: center;
}
.xieyi .isXY {
  margin-left: 85rpx;
  position: relative;
  top: 10rpx;
  /* 修改复选框的大小 */
  transform: scale(0.6);
}
.xieyi .text-xy {
  margin-left: 10rpx;
  margin-top: 20rpx;
  color: #000000;
  font-size: 25rpx;
}
.preview {
  height: 300rpx;
  width: 100%;
}

.img {
  height: 300rpx;
  width: 100%;
}

.result-card {
  border-top: 20rpx solid #f2f2f2;
  padding: 30rpx;
}
.result-card .title {
  font-size: 40rpx;
  font-weight: bold;
}

.uniParse-p {
  font-size: 28rpx;
}

latex {
  width: auto !important;
}

.empty {
  width: 750rpx;
  margin-top: 50rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.empty .text {
  margin-left: 15rpx;
  font-size: 32rpx;
  color: #333;
}
.score-content {
  display: flex;
}
.score-content .count-score {
  width: 420rpx;
  height: 420rpx;
  background-color: #f7f9ff;
  color: #2962ff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 88rpx;
  font-weight: 500;
  margin-left: 30rpx;
}
.score-detail {
  font-size: 30rpx;
  color: #909299;
  margin-left: 10rpx;
  margin-top: 130rpx;
}
.comment {
  font-size: 30rpx;
  color: #2e2f33;
  width: 700rpx;
  margin-top: 20rpx;
  margin-left: 24rpx;
}
.comment .item-advice {
  line-height: 150%;
}
.comment-content {
  margin-top: 76rpx;
}
.comment-content .remark {
  display: flex;
  align-items: center;
}
.remark .line {
  display: inline-block;
  width: 6rpx;
  height: 28rpx;
  margin-right: 16rpx;
  background-color: #2962ff;
}
.remark .text {
  font-size: 30rpx;
  font-weight: 700;
  color: #2e2f33;
}
.comment-content .result-table {
  border: 1px solid #eef0f3;
  border-radius: 4rpx;
  margin-top: 16rpx;
  margin-left: 11rpx;
  width: 670rpx;
}
.comment-content .result-table .tables {
  display: flex;
}
.comment-content .result-table .tables .table-title {
  width: 240rpx;
  background-color: #f5f7fa;
  font-size: 26rpx;
  padding-left: 40rpx;
  border-bottom: 1rpx solid #eef0f3;
  border-right: 1rpx solid #eef0f3;
  display: flex;
  align-items: center;
}
.comment-content .result-table .tables .table-content {
  width: 1000rpx;
  color: #2e2f33;
  border-bottom: 1rpx solid #eef0f3;
  display: flex;
  align-items: center;
  padding: 28rpx 40rpx;
  line-height: 40rpx;
}
</style>
